<template>
  <div class="login df jcc aic">
    <el-form class="from" :model="formData" ref="ruleForm">
      <div class="logo df jcc aic">
        <h3>九维家政管理系统</h3>
      </div>
      <el-form-item prop="account">
        <el-input
          v-model="formData.account"
          prefix-icon="el-icon-user-solid"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="formData.password"
          prefix-icon="el-icon-lock"
          show-password
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="submit" class="btn" type="primary">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 引入校验文件
// import { validateAcc, validatePwd } from "@/utils/utils.js";
// 引入接口文件
// import { checkLoginReq } from "@/api/user";

// import { setLocal, removeLocal, getLocal } from "@/utils/local";

export default {
  data() {
    return {
      formData: {
        account: "",
        password: "",
      },
      isOpen: false,
      // rules: {
      //   account: [{ validator: validateAcc, trigger: "blur" }],
      //   password: [{ validator: validatePwd, trigger: "blur" }],
      // },
    };
  },
  methods: {
    submit() {},
  },
};
</script>

<style lang="less" scoped>
.login {
  height: 100%;
  background: url("../../assets/imgs/bg1.webp") no-repeat center top;
  background-size: cover;

  .from {
    width: 400px;
    height: 300px;

    .logo {
      margin: 20px 0;
      color: #fff;

      img {
        width: 50px;
        animation: mini 3s linear infinite;
      }
    }

    .btn {
      width: 100%;
    }
  }
}

::v-deep .el-input__inner {
  background: transparent;
  color: #fff;
}
</style>
